<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">
    <title>个人中心 - 钢域云贸</title>
    <link rel="icon" href="/uploads/logo.png" type="image/x-icon"/>
    <link rel="shortcut icon" href="/uploads/logo.png" type="image/x-icon"/>
    <link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css" media="all"/>
    <link rel="stylesheet" type="text/css" href="/css/public.css"/>
    <link rel="stylesheet" type="text/css" href="/css/style.css"/>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* 表单样式优化 */
        .form-label {
            font-weight: 500;
            color: #4b5563;
        }
        .form-input {
            transition: all 0.2s ease-in-out;
        }
        .form-input:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        /* 主内容区域样式 */
        main {
            display: flex;
            min-height: calc(100vh - 64px - 64px); /* 减去 header 和 footer 高度（假设各 64px） */
            width: 100%;
        }
        /* 侧边栏样式 */
        .sidebar {
            width: 256px; /* 保持当前宽度 */
            background-color: #fff;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
        }
        /* 内容区域样式 */
        .content-area {
            flex: 1;
            padding: 2rem;
            background-color: #f7fafc; /* 匹配背景色 */
        }
        /* 确保侧边栏内容区自适应 */
        .sidebar nav {
            flex-grow: 1;
        }
        /* 响应式布局 */
        @media (max-width: 640px) {
            .sidebar {
                display: none;
            }
            .content-area {
                padding: 1rem;
            }
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
<!-- 公共头部 -->
<th:block th:replace="~{/header.html}"></th:block>
<!-- Main Content -->
<main>
<!-- 侧边栏 -->
<th:block th:replace="~{/buyer/sidebar.html}"></th:block>
    <!-- 内容区域 -->
    <div class="content-area">
<!--        <h1 class="text-2xl font-bold mb-6 text-gray-800">个人信息</h1>-->
                <div class="bg-white p-8 rounded-xl shadow-lg">
                    <!-- 提示信息 -->
                    <div th:if="${success}" class="mb-6 p-4 bg-green-100 text-green-700 rounded-lg">
                        <span th:text="${success}"></span>
                    </div>
                    <div th:if="${error}" class="mb-6 p-4 bg-red-100 text-red-700 rounded-lg">
                        <span th:text="${error}"></span>
                    </div>

                    <!-- 用户信息 -->
                    <div class="flex items-center mb-8">
                        <img th:src="${user.avatar} ?: '/uploads/default-avatar.jpg'" alt="Avatar" class="w-16 h-16 rounded-full mr-4 shadow-sm">
                        <div>
                            <h2 class="text-2xl font-semibold text-gray-800" th:text="${user.username} ?: '用户'"></h2>
                            <p class="text-gray-600" th:text="'邮箱: ' + (${user.email} ?: '未设置')"></p>
                        </div>
                    </div>

                    <form th:action="@{/buyer/profile}" method="post" enctype="multipart/form-data" class="space-y-6 max-w-2xl mx-auto bg-white p-8 rounded-xl shadow">

                        <!-- 用户名 -->
                        <div>
                            <label for="username" class="block text-gray-700 font-medium mb-2">用户名</label>
                            <input type="text" id="username" name="username" th:value="${user.username}" required
                                   class="w-full px-4 py-3 rounded-lg text-sm border border-gray-300 focus:ring-2 focus:ring-blue-300 shadow-sm">
                        </div>

                        <!-- 邮箱 -->
                        <div>
                            <label for="email" class="block text-gray-700 font-medium mb-2">邮箱</label>
                            <input type="email" id="email" name="email" th:value="${user.email}" required
                                   class="w-full px-4 py-3 rounded-lg text-sm border border-gray-300 focus:ring-2 focus:ring-blue-300 shadow-sm">
                        </div>

                        <!-- 电话 -->
                        <div>
                            <label for="phone" class="block text-gray-700 font-medium mb-2">电话</label>
                            <input type="text" id="phone" name="phone" th:value="${user.phone}"
                                   class="w-full px-4 py-3 rounded-lg text-sm border border-gray-300 focus:ring-2 focus:ring-blue-300 shadow-sm">
                        </div>

                        <!-- 公司 -->
                        <div>
                            <label for="company" class="block text-gray-700 font-medium mb-2">公司</label>
                            <input type="text" id="company" name="company" th:value="${user.company}"
                                   class="w-full px-4 py-3 rounded-lg text-sm border border-gray-300 focus:ring-2 focus:ring-blue-300 shadow-sm">
                        </div>

                        <!-- 地址 -->
                        <div>
                            <label for="address" class="block text-gray-700 font-medium mb-2">地址</label>
                            <textarea id="address" name="address" rows="3" th:text="${user.address}"
                                      class="w-full px-4 py-3 rounded-lg text-sm border border-gray-300 focus:ring-2 focus:ring-blue-300 shadow-sm"></textarea>
                        </div>

                        <!-- 更换头像 -->
                        <div>
                            <label for="avatarFile" class="block text-gray-700 font-medium mb-2">更换头像（JPG/PNG，最大2MB）</label>
                            <input type="file" id="avatarFile" name="avatarFile" accept="image/jpeg,image/png"
                                   class="block w-full text-sm text-gray-700 file:mr-4 file:py-2 file:px-4 file:rounded-full
                      file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                        </div>

                        <!-- 操作按钮 -->
                        <div class="flex justify-end gap-4 pt-4 border-t border-gray-200">
                            <a th:href="@{/buyer}"
                               class="flex items-center gap-2 px-5 py-2 text-sm bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition">
                                <i class="fas fa-times-circle"></i> 取消
                            </a>
                            <button type="submit"
                                    class="flex items-center gap-2 px-5 py-2 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition shadow">
                                <i class="fas fa-save"></i> 保存更改
                            </button>
                        </div>
                    </form>

                </div>
            </div>
    </div>
</main>

<!-- 公共底部 -->
<th:block th:replace="~{/footer.html}"></th:block>

<script src="/js/jquery-latest.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
</html>